<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="isAll" /> <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <Zuoye1 :ind='index' :obj1="obj" v-for="(obj,index) in list" :key="index" @delfn='btn1' @addfn='btn2'
          @scfn='btn3'>
        </Zuoye1>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">
            {{snm}}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>

</template>

<script>
  import Zuoye1 from './components/zuoye1.vue'
  export default {


    components: {

      Zuoye1
    },
    data() {
      return {
        list: [{
            name: "诸葛亮",
            price: 1000,
            num: 1,
            checked: false,
          },
          {
            name: "蔡文姬",
            price: 1500,
            num: 1,
            checked: false,
          },
          {
            name: "妲己",
            price: 2000,
            num: 1,
            checked: false,
          },
          {
            name: "鲁班",
            price: 2200,
            num: 1,
            checked: false,
          },
        ],
      }
    },
    methods: {
      btn1(ind) {
        this.list[ind].num > 1 && this.list[ind].num--
      },
      btn2(ind) {
        this.list[ind].num++
      },
      btn3(ind) {
        this.list.splice(ind, 1)
      }
    },
    computed: {
      snm() {

        return this.list.filter((i) => i.checked).reduce((sum, obj) => sum += obj.price * obj.num, 0)
      },
      isAll: {
        set(val) {
          this.list.forEach(obj => obj.checked = val)
        },
        get() {
          return this.list.every(obj => obj.checked == true)
        }
      }
    },

  }
</script>

<style>

</style>